<template>
    <div class="app-container">
        <el-row >
            <el-col >
                <div class="head-container">
                    <el-input v-model="keyWord"  clearable placeholder="输入内容/创建人搜索" style="width: 200px;" class="filter-item"></el-input>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator=":"
                        class="el-range-editor--small filter-item"
                        style="height: 30.5px;width: 220px;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    <!-- <el-select clearable placeholder="状态" class="filter-item" style="width: 90px">
                        <el-option/>
                    </el-select> -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                    </div>
                    <!-- 导出 -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download">导出</el-button>
                    </div>
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-edit" @click="handleWrite()">写微言</el-button>
                    </div>
                    <div style="float:right">
                        <el-button size="mini" icon="el-icon-refresh" @click="getData()">刷新</el-button>
                    </div>
                </div>
            </el-col>   
        </el-row>
        <div>
            <el-table v-loading="tableLoading" border :data="tableData" size="small" style="width: 100%;">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column label="微言内容" >
                    <template slot-scope="scope">
                        <div style="width: 100%;height:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;" v-html="scope.row.content"></div>
                    </template>
                </el-table-column>
                <el-table-column label="关联图片" width="240">
                    <template slot-scope="scope">
                        <el-carousel :loop="false" :autoplay="false" type="card" height="80px">
                            <el-carousel-item v-for="item in scope.row.imgList" :key="item.id">
                                <div class="div-img">
                                    <viewer >
                                        <img :src="item.url">
                                    </viewer>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                        <!-- <div class="div-img">
                            <viewer :images="scope.row.imgList">
                                <img v-for="item in scope.row.imgList" :src="item.url" :key="item.id">
                            </viewer>
                        </div> -->
                    </template>
                </el-table-column>
                <el-table-column prop="thumbup" width="90" label="点赞数"/>
                <el-table-column prop="comment" width="90"  label="评论数"/>
                <el-table-column label="状态" align="center" width="130px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" 
                            active-color="#409EFF" 
                            inactive-color="#F56C6C"
                            :active-value="1"
                            :inactive-value="0"
                            :active-text="scope.row.status=== 1? '已审核':'未审核'"
                        @change="changeEnabled(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" width="90" label="创建人"/>
                <el-table-column prop="createTime" width="160" label="发表时间" fixed="right"/>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleView(scope.row) "/>
                        <el-button size="mini" type="info"    icon="el-icon-view" @click="handleAdd(scope.row,'edit')"></el-button>
                        <el-popover :ref="scope.row.id" placement="top" width="180">
                            <p>确定删除本条数据吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()" >取消</el-button>
                                <el-button :loading="delLoading" type="primary" size="mini" @click="delCommit(scope.row)">确定</el-button>
                            </div>
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
                <!--分页组件-->
            <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="currentPage" 
                :page-sizes="[10, 20, 50, 100]" 
                :page-size="pageSize" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="total">
            </el-pagination>
        </div>
        <!-- <div>
            <whisper-add-and-edit ref="whisperAddAndEdit"></whisper-add-and-edit>
        </div> -->
    </div>
</template>
<script>
import pageHelp         from "@/mixins/pageHelp";
import { parseTime } from '@/utils/index'
import { queryWhisper,delWhisper,editWhisper } from "@/api/whisper"
// import AddAndEdit from '@/views/system/whisper/dialog/AddAndEdit'
export default {
    name: "Whisper",
    mixins: [pageHelp],
    // 设置数据字典
    components:{
        // 'whisper-add-and-edit':AddAndEdit,  //新增/编辑微言组件
    },
    computed:{
        whisperImgs(){
            return function(imgList){
                if(imgList && imgList.length > 0){
                    let arrImg = []
                    imgList.forEach(item => {
                        arrImg.push(item.url)
                    })
                    return arrImg
                }else {
                    return null
                }
            }
        }
    },
    data() {
        return{
            date        : [],//查询时间
            keyWord     : '',//查询关键字
            tableData   : [],
            tableLoading: false,
            delLoading:false,
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            //调用获取微言api
            this.apiQueryWhisper()
        },
        //删除微言
        delCommit(row){
            this.apiDelWhisperById(row.id)
        },
        changeEnabled(row){
            this.editWhisperStatus(row.id,row.status)
        },
        handleAdd(row,type){
            let isAdd = (type === 'add'? true:false)
            this.$nextTick(()=>{
                this.$refs.whisperAddAndEdit.init(row,isAdd)
            })
        },
        handleView(row){
            this.$router.push({path:'/whisper/edit',query: { param: row }});
        },
        handleWrite(){
            this.$router.push({path:'/whisper/write'});
        },
        //点击查询
        search(){
            this.apiQueryWhisper()
        },
        //翻页查询
        pageQuery(){
            this.apiQueryWhisper()
        },
        //==========>请求api接口<==========//
        //查询微言集合api
        apiQueryWhisper(){
            //管理员查询接口
            this.tableLoading =true
            let params = {
                pageNum : this.pageNum,
                pageSize: this.pageSize
            }
            !!this.keyWord.trim() && (params.keyWord = this.keyWord)
            !!this.date && (this.date.length !==0) && (params.date = this.date.join(','))
            queryWhisper(params).then(res=>{
                if(res.code ===200){
                    this.tableData    = res.data.list
                    this.total        = res.data.total
                    this.tableLoading = false
                }
            }).catch((err)=>{
                this.tableLoading = false
            })
        },
        //通过微言id删除微言
        apiDelWhisperById(id){
            //管理员删除接口
            this.delLoading =true
            delWhisper(id).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.delLoading = false
                    this.$refs[id].doClose()
                    this.apiQueryWhisper()
                }
            }).catch((err)=>{
                this.$refs[id].doClose()
                this.delLoading = false
            })
        },
        //==========>请求api接口<==========//
    }
        
}
</script>

<style scoped>
.div-img{
 	width: 140px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.div-img img{
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 70px;
} 
</style>